<div class="dao-editable-table">
  <table class="dao-table flexrow" v-if="rows.length > 0">
    <thead v-if="!noThead">
      <tr>  
        <th v-for="th in header">{{th.text}}
          <slot :name="th.text"></slot>
        </th>
        <th class="det-edit-col">{{ operationText }}</th>
      </tr>
    </thead>
    <tbody>
      <tr class="det-tr" v-for="(row, index) in rows" :class="{activate: index === activatedRow}">
        <td v-for="td in row" class="det-td">
            <dao-input class="det-input"
            type="text"
            v-if="td.type === 'input'"
            v-model="td.value"
            size="sm"
            :block="true"
            no-border
            :icon-inside="instantCheck"
            :placeholder="td.placeholder"
            :message="typeof(td.valid) === 'string' && instantCheck ? td.valid : ''"
            :status="typeof(td.valid) === 'string' ? 'error' : ''"
            @focus="focusRow(index)"
            @blur="onBlur">
          </dao-input>
          <input
            type="checkbox"
            v-if="td.type === 'checkbox'"
            :name="td.name"
            v-model="td.value"
            @change="validteAndUpdate()">
          <label :for="td.name" v-if="td.type === 'checkbox'">{{td.label}}</label>
          <dao-select
            class="det-select"
            :name="td.name"
            v-if="td.type === 'select'"
            v-model="td.value"
            size="sm"
            @change="validteAndUpdate()">
            <dao-option v-for="option in td.options" :value="option.value || option" :label="option.label || option" :key="option.value || option"></dao-option>
          </dao-select>
          <span v-if="td.type === 'text'">{{ td.value }}</span>
        </td>
        <td class="det-edit-col">
          <svg class="det-remove-btn" @click="removeRow(row)"><use xlink:href="#icon_minus-circled"></use></svg>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="det-add" @click="addRow">
    <svg class="det-add-btn"><use xlink:href="#icon_plus-circled"></use></svg>
    <span class="det-add-span">{{ addText }}</span>
  </div>
</div>
